參考文章:https://cythilya.github.io/2017/04/15/vue-watch/
<el-input placeholder="快速搜尋" prefix-icon="el-icon-search" v-model="searchID"></el-input>
<el-table :data="dataList" border style="width: 100%">
<el-table-column fixed label="帳號" min-width="150" prop="accountID"></el-table-column>
<el-table-column label="資訊" min-width="150" prop="data"></el-table-column>
</el-table>
<script>
export default {
name: "UserPage",
data() {
return {
searchID: "",
dataList:[]
};
},
watch:{
// 與要監聽的data命名一樣(searchID)
searchID:function(){
this.fasterSearch();
}
},
methods:{
fasterSearch() {
// 使用filter對dataList的ID做篩選
}
},
}
</script>
使用的是vue-cli + element_UI
(文章: Watch 可讓我們監視某個值,當這個值變動的時候,就去做某些事情。)
fasterSearch()
,篩選出對應的資料,做到不需要再按輸入鍵(Enter)才能進行篩選的動作通常會加個 debounce time
不然一直按著鍵盤
就會一直去 trigger
感謝分享,我需要去查一下關於debounce time
哈哈~技能太弱,第一次聽到,抱歉